<template>
<view :class="['store', { show: show }]">
	<view class="mask" @tap="$emit('on-close')"></view>
	<view class="list">
		<scroll-view scroll-y class="srx">
			<view class="shop">
				<view class="item" v-for="item in list" :key="item.id" @tap="$emit('on-select', item)">
					<view class="same">
						<image src="/static/shopicon.png"></image>
						<text>门店：{{ item.name }}</text>
					</view>
					<view class="same">
						<image src="/static/address_black.png"></image>
						<text>地址：{{ item.address }}</text>
					</view>
				</view>				
			</view>			
		</scroll-view>
		<empty-data v-if="!list.length" src="/static/noshop.png">
			正在努力搭建中...
		</empty-data>
	</view>	
</view>
</template>

<script>
	export default {
		props:{
			show: {
				type: Boolean,
				default: false
			},
			list: Array
		}
	}
</script>

<style lang="less" scoped>
@import '../../common/styles/variables.less';
.store {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	visibility: hidden;
	.mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background:rgba(0, 0, 0, 0.4);
		transition-duration: .4s;
		will-change: opacity;
		opacity: 0;		
	}
	.list {
		max-height: 60%;
		min-height: 40%;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color:@sliver;
		transform: translate3d(0, 100%, 0);
		will-change: transform;
		transition-duration: .2s;
		.srx {
			height: 100%;
			.shop {
				.item {
					background-color:white;
					&:not(:last-of-type) {
						margin-bottom: 15upx;
					}
					.same {
						padding: 0 15upx;			
						height: 70upx;
						font-size: 12px;
						display: flex;
						align-items: center;
						&:first-of-type {
							.border-bottom(15upx)
						}
						.border-bottom;
						image {
							width: 30upx;
							height: 30upx;
							margin-right: 10upx;
							display: block;
						}
						text {.twoLine(1);flex:1;}
					}		
				}
			}			
		}
	}
	&.show {
		visibility: visible;
		.mask {
			opacity: 1;			
		}
		.list {
			transform: translate3d(0, 0, 0);
		}
	}	
}
</style>
